<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="${ctx}/static/plug/weui/css/weui.css" media="all">
<link rel="stylesheet" href="${ctx}/static/plug/weui/css/weuix.css" media="all">
<link rel="stylesheet" href="${ctx}/static/css/addCarNo.css" media="all">
<link rel="stylesheet" href="${ctx}/static/css/ticket/index.css"
	media="all">
<title>购票页面</title>
<style type="text/css">
body{
	background-color: #ebebeb;
	color: #777;
}
.tickets{
	height: 140px;
}
.tickets > div{
	float: left;
	
}
.tourists{
	width: 70%;
}
.tickets_type{
	width: 30%;
}
.weui-label{
	width:60px; 
}
.tickets_type>p{
	margin-top:8px;
	text-align: center;
	height: 62px;
}
.tickets_type_p>span{
	display: inline-block; 
	width: 70px;
	background-color: #f39800;
	border-radius: 5px;
	color: white;
	font-size: 10px;
}
.tickets_prices{
	color: #f39800;
	font-size: 20px;
}
.weui-btn{
	padding: 0;
	width: 85px;
	float: right;
	height:30px;
	margin-right: 10px;
	padding-top: 3px;
}
.weui-btn + .weui-btn{
	margin-top: 0px;
}
</style>
<body>
	<div class="touristInformation">
	<input type="hidden" value="${ticketOrder.id}" id="orderId">
	<input type="hidden" value="${ticketOrder.userId}" id="userId">
	<c:forEach var="ticketOrderDetailVo" items="${ticketOrderDetailVoList}"  varStatus="status">
		<div class="tickets">
			<div class="tourists">
			<div class="weui-cell">
				<div class="weui-cell__hd">
					<label class="weui-label" >游客</label>
				</div>
				<div class="weui-cell__bd">
					<input class="weui-input" readonly="readonly" value="${status.count}" type="text">
				</div>

			</div>
				<div class="weui-cell">
				<div class="weui-cell__hd">
					<label class="weui-label" >姓名</label>
				</div>
				<div class="weui-cell__bd">
					<input class="weui-input" readonly="readonly" value="${ticketOrderDetailVo.userName}"  type="text" >
				</div>

			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd">
					<label class="weui-label" >身份证</label>
				</div>
				<div class="weui-cell__bd">
					<input class="weui-input" readonly="readonly"  value="${ticketOrderDetailVo.userIdNumber}" type="text">
				</div>

			</div>
			</div>
			<div class="tickets_type">
				<p class="tickets_type_p"><span>${ticketInfo.name }</span></p>
				<p class="tickets_prices">￥ ${ticketInfo.price/100 }</p>
			</div>
		</div>
		</c:forEach>
		
	</div>	
		
		
		
		<div style="height: 70px; width: 100%;"></div>
	<div class="priceDisplay">
		<div style="width: 40%;">
			<p class="prices" style="padding-left: 20px;">
				总额：￥<span class="price">${ticketOrder.totalFee/100}</span>
			</p>
		</div>
		<div style="width: 60%">
			<span id="payBtn" class="weui-btn bg-orange">立即支付</span> <span id="delBtn" class="weui-btn bg-orange">取消订单</span>
		</div>
	</div>
</body>
<script src="${ctx}/static/js/jquery/jquery-3.2.1.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script src="${ctx}/static/js/laydate/laydate.js"></script>
<script src="${ctx}/static/js/user/addCarNo.js"></script>
<script src="${ctx}/static/plug/layer_mobile/layer.js"></script>
<script src="${ctx}/static/js/common.js"></script>
<script src="${ctx}/static/plug/weui/js/zepto.weui.js" type="text/javascript"></script>
<%-- <script src="${ctx}/static/js/jweixin-1.2.0.js"></script> --%>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">
wx.config({
	debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	appId : "${signature.appId}", // 必填，公众号的唯一标识
	timestamp : "${signature.timestamp}", // 必填，生成签名的时间戳
	nonceStr : "${signature.nonceStr}", // 必填，生成签名的随机串
	signature : "${signature.signature}",// 必填，签名，见附录1
	jsApiList : [ 'chooseWXPay' ]
// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
	$(function() {
		var submission = true;
		var orderId = $("#orderId").val();
		var userId = $("#userId").val();
		wx.ready(function() {
			$("#payBtn").click(
					function() {
						if (submission) {
							submission = false;
							$.post("${ctx}/pay/goDownAgain", "orderId="+orderId, function(obj) {
								submission = true;
								if (obj) {
									var wxPayParams = obj.wxPayParams;
									console.log(wxPayParams);
									wxPayParams = $.parseJSON(wxPayParams);
									var timeStamp = wxPayParams.timeStamp;
									var nonceStr = wxPayParams.nonceStr;
									var packageStr = wxPayParams.packageStr;
									var signType = wxPayParams.signType;
									var paySign = wxPayParams.paySign;
									wx.chooseWXPay({
										"timestamp" : timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
										"nonceStr" : nonceStr, // 支付签名随机串，不长于 32 位
										"package" : packageStr, // 支付签名随机串，不长于 32 位
										"signType" : signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
										"paySign" : paySign, // 支付签名
										success : function(res) {
											window.location.href = "${ctx}/order/orderWaiting?userId=" + userId;
										}
									});
								}
								
							});
						}
					});
		});
		
		
		$("#delBtn").click(function() {
			$.confirm("您确定要取消订单吗?", "确认删除?", function() {
				if (submission) {
				submission = false;
				$.post("${ctx}/order/cancel","orderId="+orderId,function(obj) {
					if(obj.status == "success"){
						setTimeout(countDown, 3000);
						$.noti({
				            title: "订单取消成功",
				            time: 3000,
				            onClick: function(data) {
				                $.alert(data.message);
				            }
				        });
					}
				});
				}
            }, function() {
                //取消操作
            });
        });
			
			
		function countDown() {
			var userId = $("#userId").val();
			window.location.href="${ctx}/order/myOrder?userId="+userId;
		}
	});
</script>
</html>
